<template>
	<view class="mine-infor">
		<view class="infor-top">
			<view class="card">
				<span class="center-title">头像</span>
				<view>
					<uni-icons color="#bbb" size="28" type="contact-filled" />
					<icon-svg icon-class="icon-test7" />
				</view>
			</view>
			<view class="card">
				<span class="center-title">名字</span>
				<span style="color: #5B5F62;font-size: 36rpx;">陈赫斯</span>
			</view>
		</view>
		<view class="infor-center">
			<view class="card" v-for="item in centerList" :key="item.index">
				<span class="center-title">{{ item.title }}</span>
				<view>
					<span style="color:#ccc;font-size: 30rpx;">{{ item.detail }}</span>
					<icon-svg icon-class="icon-test7" />
				</view>
			</view>
		</view>
		<view class="infor-footer"><text>退出登录</text></view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons
	},
	data() {
		return {
			centerList: [
				{ title: '切换企业', detail: '时代邻里股份有限公司' },
				{ title: '手机绑定', detail: '15875948321' },
				{ title: '邮箱绑定', detail: '未绑定' },
				{ title: '修改密码' },
				{ title: '新建企业' },
				{ title: '离开企业' }
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.mine-infor {
	.card {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 10rpx;
		border-bottom: 1px solid #ccc;
	}
	.infor-top {
		background: #fff;
	}
	.infor-center {
		background: #fff;
		margin-top: 30rpx;
	}
	.infor-footer {
		background: #fff;
		margin-top: 30rpx;
		padding: 20rpx;
		text-align: center;
	}
}
</style>
